<template>
  <div class="package-container">
    <el-table
      size="small"
      :data="tableData"
      stripe
      border
      @sort-change="sortHandler"
      @expand-change="expandChangeHandler"
      :row-key="getRowKeyList"
      :expand-row-keys="expandList"
    >
      <el-table-column
        width="50px"
        align="center"
        type="index"
      >
        <!-- <template slot-scope="props">
          <el-tag
            :key="upgradeDevice.uuid"
            v-for="upgradeDevice in props.row.upgradeDeviceList"
            closable
            @close="handleClose(upgradeDevice.uuid,props.row)"
          >{{ upgradeDevice.serial_number }}</el-tag>
        </template> -->
      </el-table-column>
      <el-table-column
        width="160px"
        label="名称"
        align="center"
        prop="name"
      >
      </el-table-column>
      <el-table-column
        width="80px"
        label="版本号"
        align="center"
        prop="versionName"
      ></el-table-column>
      <el-table-column
        label="产品类型"
        align="center"
        prop="deviceTypeName"
      >
      </el-table-column>
      <el-table-column
        width="210px"
        label="文件名称"
        align="center"
        prop="packageName"
      >
      </el-table-column>
      <el-table-column
        label="允许升级"
        align="center"
        prop="active"
      >
        <template slot-scope="scope">
          <span
            v-if="scope.row.active"
            style="color:#07c160"
          >允许</span>
          <span
            v-else
            style="color:#fa5151"
          >不允许</span>
        </template>
      </el-table-column>
      <el-table-column
        label="字节数"
        align="center"
        prop="size"
      ></el-table-column>
      <el-table-column
        label="产品列表"
        align="center"
      >
        <template slot-scope="scope">
          <el-button
            type="text"
            size="mini"
            @click="toProductList(scope.row.name,scope.row.id)"
            icon="el-icon-tickets"
          >查看</el-button>
        </template>
      </el-table-column>
      <el-table-column
        label="备注"
        align="center"
        prop="description"
      >
      </el-table-column>
      <el-table-column
        label="产品导入"
        align="center"
      >
        <template slot-scope="scope">
          <el-button
            icon="el-icon-document-copy"
            type="text"
            size="small"
            @click="showUpload(scope.row.id)"
          >上传文件</el-button>
        </template>
      </el-table-column>
      <el-table-column
        width="155px"
        prop="createdAt"
        label="创建时间"
        sortable
        align="center"
      ></el-table-column>
      <el-table-column
        width="155px"
        prop="updatedAt"
        label="更新时间"
        sortable
        align="center"
      ></el-table-column>
      <el-table-column
        label="操作"
        align="center"
        v-if="userGuardList.includes(guard.PackageManage)"
      >
        <template slot-scope="scope">
          <el-button
            type="text"
            icon="el-icon-edit"
            size="small"
            @click="showEdit(scope.row)"
          >编辑</el-button>
          <el-button
            type="text"
            icon="el-icon-delete"
            size="small"
            @click="remove(scope.row.id, scope.row.name)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <edit
      ref="editComponent"
      @refresh="search"
    ></edit>
    <up-load
      ref="uploadComponent"
      @refresh="search"
      @closeExpand="closeExpand"
    ></up-load>
  </div>
</template>

<script>
import UpLoad from './upload';
import Edit from './edit';
import { Message, MessageBox } from 'element-ui';
import { parseError } from '../../../utils';
import { SortType } from '../../../constants/common';
import { deletePackageApi } from '../../../api/package';
import { deleteTagUpgradeDeviceApi, getChooseUpgradeDeviceList } from '../../../api/upgradeDevice';

export default {
  components: {
    Edit,
    UpLoad
  },
  model: {
    prop: 'sort'
  },
  props: {
    sort: {
      type: Object,
      default() {
        return {};
      }
    },
    tableData: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  data() {
    return {
      expandList: [],
      upgradeDeviceList: [],
      settingId: null,
      packageId: null,
      settingIdList: []
    };
  },
  methods: {
    toProductList(name, packageId) {
      let productListRoute = this.$router.resolve({
        name: 'upgradeDevice',
        query: {
          packageName: name,
          packageId: packageId
        }
      });
      window.open(productListRoute.href, '_blank');
    },
    closeExpand() {
      this.expandList = [];
    },
    getRowKeyList(row) {
      return row.id;
    },
    search() {
      this.$emit('search');
    },
    sortHandler(data) {
      // if (!data.prop || !data.order) return;
      this.sort.sortType = data.order == 'ascending' ? SortType.ASC : SortType.DESC;
      this.$emit('search');
    },
    remove(id, name) {
      MessageBox.confirm(`确认删除${name}吗？`, '删除提示', {
        type: 'warning',
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        deletePackageApi(id)
          .then(() => Message.success('删除升级包成功'))
          .catch(error => Message.error(parseError(error)))
          .finally(() => this.$emit('search'));
      });
    },
    showEdit(row) {
      this.$refs.editComponent.showDialog(row);
    },
    showUpload(packageId) {
      this.packageId = packageId;
      this.$refs.uploadComponent.showDialog(packageId);
    },
    // handleClose(uuid, row) {
    //   this.packageId = row.id;
    //   row.upgradeDeviceList = row.upgradeDeviceList.filter(device => device.uuid !== uuid);
    //   this.tableData = this.tableData.filter(item => item);
    //   deleteTagUpgradeDeviceApi(uuid, this.packageId, this.settingId)
    //     .then(() => {
    //       Message.success({
    //         message: '删除成功',
    //         duration: 800
    //       });
    //     })
    //     .catch(error => Message.error(parseError(error)));
    // },
    expandChangeHandler(row) {
      getChooseUpgradeDeviceList(row.id, this.settingId)
        .then(res => {
          row.upgradeDeviceList = res;
          this.tableData = this.tableData.filter(item => item);
        })
        .catch(error => Message.error(parseError(error)));
    }
  }
};
</script>

<style lang="scss" scoped>
.package-container {
  .el-tag {
    margin: 0 20px 10px 0;
  }
}
</style>
